<template>
    <div>
        <div style="margin: 0 auto; width: 1920px; height: 500px">
            <!--使用的图片标准应该是1920*500px-->
            <img src="~assets/img/product-detail.jpg" alt="">
        </div>
        <div class="page_Tab_title c" id="page_Tab_title">
            <div class="pro-name c por">
                <div class="fr pro-price por">
                <span class="pro-price-item"
                >保费：<span class="ano_ff7e00 span_8 fwb"><slot
                        name="policy-fee">{{ detail.price }}</slot></span>元/起</span
                >
                    <div
                            class="dib proPrice_btn"
                            style="background-color: #0000ad"
                            otype="entry"
                            id="T-ljgm-zjly"
                            @click="buy"
                    >立即投保
                    </div>
                </div>
                <div class="pro_det_con_tips ertong_bottom fl c">
                    <p>
                        <span style="font-family: Ubuntu, sans-serif;"><strong>适用人群</strong>：{{detail.insuranceAge}}</span>
                        <span><strong>保险期限</strong>：{{ detail.insuredPeriod}}</span>
                    </p>
                    <br/>
                    <p>
                        <span><strong>销售范围</strong>：{{ detail.guaranteeArea }} </span>
                        <span><strong>保单形式</strong>：电子保单、纸质保单</span>
                    </p>
                    <p>
                    <span>
                        <strong>保险责任</strong>：请阅读
                        <a
                                otype="button"
                                class="ano_2e84ca"
                                id="T-jwysytkxw01"
                        >《淘宝安诊无忧·百万医疗险保险条款》</a
                        >
                        ,并敬请特别留意条款中的
                        <span class="ano_ff6200 wida">“责任免除”“释义”</span>部分。
                    </span>
                    </p>
                </div>
            </div>
        </div>
        <!-- TAB 选卡 END-->
        <div class="page-width c">
            <div id="page_Tab c">
                <div id="page_Tab_buy" class="page_Tab_buy1">
                    <div class="page_Tab">
                        <ul class="page_Tab_nav c">
                            <li class="cut" style="background-color: #0000ad">保障计划</li>
                            <li>产品特色</li>
                            <li>投保须知</li>
                            <li>常见问题</li>
                        </ul>

                    </div>
                </div>
            </div>
            <div class="page_Tab_title_stay dsn"></div>
            <!-- 保障计划 START-->
            <div class="pro_det_con bz-table c" id="page_Tab_cell0">
                <div class="pro_det_box2 pro_det_con1 por">
                    <p class="fr_unit poa">单位：人民币（元）</p>
                    <div class="bz-table-tab c">
                        <p class="bzjh_btn pro_p pro_pact">保障计划</p>
                        <p class="bzxqjd_btn pro_p">保障详情解读</p>
                    </div>
                    <div class="c">
                        <table width="100%" border="0" cellspacing="0" cellpadding="0" class="quanqiulvyou-tab">
                            <colgroup>
                                <col width="200px">
                                <col width="280px">
                            </colgroup>
                            <thead>
                            <tr>
                                <th>保障类型</th>
                                <th>保障项目</th>
                                <th class="bzjh">计划一</th>
                                <th class="bzxqjd">保障详情解读</th>
                            </tr>
                            </thead>
                            <tbody>
                            <tr>
                                <td rowspan="4">健康保障</td>
                                <td>一般医疗费用保险责任</td>
                                <td class="bzjh">300万</td>
                                <td class="bzxqjd">
                                    1.保障内容：被保险人因遭受意外伤害事故或自保险期间开始且30天等待期满后，因疾病必须在符合本保险合同释义的医院接受治疗的，对于其实际支出的必要且合理的各项医疗费用，保险人按照保险合同约定扣除1万元免赔额后按100%比例承担一般医疗费用保险责任，最高不超过一般医疗费用保险金额。<br>
                                    1）住院医疗费用；<br>
                                    2）住院前后门急诊医疗费用（前七天后三十天）；<br>
                                    3）特殊门诊医疗费用；<br>
                                    4）门诊手术医疗费用；<br>
                                    2.赔付规则：<span class="f_c_f63">年度免赔额1万元，赔付比例为100%</span>。投保时被保险人以有基本医疗保险或公费医疗的身份参保，但就诊时未使用基本医疗保险或公费医疗的，则<span
                                        class="f_c_f63">赔付比例为60%</span>。
                                </td>
                            </tr>
                            <tr>
                                <td>重大疾病医疗费用保险责任（<a href="javascript:;" class="f_c_f63" id="tdjb100">100种特定疾病</a>）</td>
                                <td class="bzjh">300万</td>
                                <td class="bzxqjd">
                                    1.保障内容：被保险人自保险期间开始且30天等待期满后，经释义医院初次确诊罹患本保险合同释义规定并在合同中载明的重大疾病（无论一种或多种），因疾病必须在符合本保险合同释义医院接受治疗的，对于其实际支出的必要且合理的医疗费用，按照保险合同约定后按100%赔付比例首先在上述一般医疗保险费用责任的赔付范围内承担给付一般医疗费用的保险责任，当保险人累计给付金额达到一般医疗费用保险金额后，保险人依照下列约定承担给付重大疾病医疗费用的保险责任，最高不超过重大疾病医疗费用保险金额：<br>
                                    1）重大疾病住院医疗费用；<br>
                                    2）重大疾病住院前后门急诊医疗费用（前七天后三十天）；<br>
                                    3）重大疾病特殊门诊医疗费用；<br>
                                    4）重大疾病门诊手术医疗费用；<br>
                                    2.赔付规则：年度免赔额0，赔付比例为100%。投保时被保险人以有基本医疗保险或公费医疗的身份参保，但就诊时未使用基本医疗保险或公费医疗的，则赔付比例为60%。<br>
                                    3.疾病范围：<span class="f_c_f63">仅承担条款释义“重大疾病”序号1-100的重大疾病</span>导致的保险责任，其他重大疾病不在保障范围内。

                                </td>
                            </tr>
                            <tr>
                                <td>质子重离子医疗费用保险责任</td>
                                <td class="bzjh">100万</td>
                                <td class="bzxqjd">
                                    1.保障内容：被保险人自保险期间开始且30天等待期满后经释义医院初次确诊罹患恶性肿瘤，在上海质子重离子医院暨复旦大学附属肿瘤医院质子重离子中心接受质子重离子放射治疗的，对于其实际支出的合理且必要的质子重离子医疗费用，保险人按照保险合同约定承担给付质子重离子医疗费用的保险责任，最高不超过质子重离子医疗费用保险金额<br>
                                    2.赔付规则：<span class="f_c_f63"> 0免赔，100%赔付</span>。

                                </td>
                            </tr>
                            <tr>
                                <td>健康管理服务</td>
                                <td class="bzjh">5000</td>
                                <td class="bzxqjd">
                                    保险人自保险生效日后第30天起，可在授权服务商处使用在线问诊服务，经诊断罹患健康管理服务手册载明的100种特定疾病，授权服务商根据健康管理服务手册载明的服务内容及其所开具的处方，向被保险人提供药品费用金额80%的抵扣服务，被保险人自付药品费用金额20%。单次药品抵扣服务额度为500元，超出部分亦由被保险人自行承担；累计提供的药品服务次数为10次，累计服务额度5千元；登录好生活APP，在在首页-查保单或在我的-我的保单点击“安诊无忧”板块即可享用健康管理服务。
                                </td>
                            </tr>
                            <tr>
                                <td rowspan="5">专享服务</td>
                                <td>住院垫付</td>
                                <td rowspan="5" class="bzjh">专享</td>
                                <td class="bzxqjd">
                                    由专人提供住院押金垫付服务，不限次数。
                                </td>
                            </tr>
                            <tr>
                                <td>重疾服务</td>
                                <td class="bzxqjd">
                                    针对初次诊断重疾安排服务包括专家二诊、住院安排、手术安排、医后随访、专业陪诊各一次。
                                </td>
                            </tr>
                            <tr>
                                <td>在线问诊</td>
                                <td class="bzxqjd">
                                    提供一对一在线问诊服务，不限次数
                                </td>
                            </tr>
                            <tr>
                                <td>药品服务</td>
                                <td class="bzxqjd">
                                    经授权服务商诊断罹患特定疾病，服务商根据在线处方提供药品服务（具体以健康管理服务手册为准）。
                                    每次药品服务额度500元，被保险人自付比例20%，年度累计10次，累计5000元。
                                </td>
                            </tr>
                            <tr>
                                <td>健康商品优惠权益</td>
                                <td class="bzxqjd">
                                    送总价值5000元的健康服务产品无门槛礼券，可用于健康服务抵扣
                                </td>
                            </tr>
                            </tbody>
                        </table>
                        <!--特别提醒 start-->
                        <div class="bz_zr">

                            <p>保险责任请参考《<a
                                    href="http://baoxian.pingan.com/uploadfile/clause/file/pingananzhenwuyoubaoxiantiaokuan.pdf"
                                    target="_blank" title="安诊无忧·百万医疗险保险条款" otitle="安诊无忧·百万医疗险保险条款-下" otype="button"
                                    class="ano_2e84ca " id="T-jwysytkxw02">安诊无忧·百万医疗险保险条款</a>》，并敬请特别留意条款中的<span
                                    class="ano_ff6200">“责任免除”“释义”</span>部分。
                            </p>
                        </div>
                        <!--特别提醒 end-->
                    </div>
                    <div class="bzxqjd">

                    </div>
                </div>
            </div>
            <!-- 保障计划 END-->
            <!-- 产品特色START-->
            <div class="pro_det_con dsn c cpts" id="page_Tab_cell1">
                <img src="./insuranceDetails/paazwytese.jpg" alt="安诊无忧·百万医疗险" title="安诊无忧·百万医疗险">
            </div>
            <!-- 产品特色 END-->
            <!-- 投保须知START-->
            <div class="pro_det_con tbxz por dsn c" id="page_Tab_cell2">
                <div class="bdyl_zytx poa">
                    <p class="zytx pro_p"><a
                            href="http://baoxian.pingan.com/upload/file/baoxian_pdf/anzhenwuyoubaiwanyizhongyaotixing2020.pdf"
                            target="_blank">重要提醒</a></p>
                </div>
            </div>
            <!-- 投保须知 END-->
            <!-- 常见问题START-->
            <div class="pro_det_con cjwt dsn c" id="page_Tab_cell3">
                <dl class="qa_box c">
                    <dt class="c">
                        <img src="./insuranceDetails/h_cjwt1.png" width="80" height="80" alt="">
                        <div class="qa_con por">
                            <div class="qa_con1">
                                <div class="qa_inner">
                                    <p>安诊无忧·百万医疗险在哪些医院治疗，可以获得理赔？</p>
                                </div>
                            </div>
                        </div>
                    </dt>
                    <dd>
                        <img src="./insuranceDetails/h_cjwt2.png" width="80" height="80" alt="">
                        <div class="qa_con por">
                            <div class="qa_con1">
                                <div class="qa_inner">
                                    <p class="por">
                                        在中华人民共和国境内（不含港、澳、台地区）二级及以上公立医院普通部接受住院、住院前7天后30天门急诊、特殊门诊、门诊手术治疗的，可以报销个人支付的、必要且合理的医疗费用。
                                    </p>
                                </div>
                            </div>
                        </div>
                    </dd>
                </dl>
                <dl class="qa_box mt30 c">
                    <dt class="c">
                        <img src="./insuranceDetails/h_cjwt1.png" width="80" height="80" alt="">
                        <div class="qa_con por">
                            <div class="qa_con1">
                                <div class="qa_inner">
                                    <p>安诊无忧·百万医疗险等待期是多久？</p>
                                </div>
                            </div>
                        </div>
                    </dt>
                    <dd>
                        <img src="./insuranceDetails/h_cjwt2.png" width="80" height="80" alt="">
                        <div class="qa_con por">
                            <div class="qa_con1">
                                <div class="qa_inner">
                                    <p class="por">
                                        安诊无忧·百万医疗险的一般医疗费用保险责任、重大疾病医疗费用保险责任、质子重离子医疗费用保险责任等待期30天，意外伤害及续保无等待期Q3
                                        投保前已经发生的疾病住院，或即将有住院意向是否可以理赔。</p>
                                </div>
                            </div>
                        </div>
                    </dd>
                </dl>
                <dl class="qa_box mt30 c">
                    <dt class="c">
                        <img src="./insuranceDetails/h_cjwt1.png" width="80" height="80" alt="">
                        <div class="qa_con por">
                            <div class="qa_con1">
                                <div class="qa_inner">
                                    <p>投保前已出现健康告知中列明的情况,是否可以投保？</p>
                                </div>
                            </div>
                        </div>
                    </dt>
                    <dd>
                        <img src="./insuranceDetails/h_cjwt2.png" width="80" height="80" alt="">
                        <div class="qa_con por">
                            <div class="qa_con1">
                                <div class="qa_inner">
                                    <p class="por">投保前已出现健康告知中列明的情况，必须全部如实告知，若未如实告知，将无法获得赔付。
                                    </p>
                                </div>
                            </div>
                        </div>
                    </dd>
                </dl>
                <dl class="qa_box mt30 c">
                    <dt class="c">
                        <img src="./insuranceDetails/h_cjwt1.png" width="80" height="80" alt="">
                        <div class="qa_con por">
                            <div class="qa_con1">
                                <div class="qa_inner">
                                    <p>什么是犹豫期？</p>
                                </div>
                            </div>
                        </div>
                    </dt>
                    <dd>
                        <img src="./insuranceDetails/h_cjwt2.png" width="80" height="80" alt="">
                        <div class="qa_con por">
                            <div class="qa_con1">
                                <div class="qa_inner">
                                    <p class="por">
                                        保单承保次日起，有10日的犹豫期。在此期间，若提出解除本主险合同，我们将无息退还您所支付的全部保险费。
                                    </p>
                                </div>
                            </div>
                        </div>
                    </dd>
                </dl>
                <dl class="qa_box mt30 c">
                    <dt class="c">
                        <img src="./insuranceDetails/h_cjwt1.png" width="80" height="80" alt="">
                        <div class="qa_con por">
                            <div class="qa_con1">
                                <div class="qa_inner">
                                    <p>保单生效日？</p>
                                </div>
                            </div>
                        </div>
                    </dt>
                    <dd>
                        <img src="./insuranceDetails/h_cjwt2.png" width="80" height="80" alt="">
                        <div class="qa_con por">
                            <div class="qa_con1">
                                <div class="qa_inner">
                                    <p class="por">
                                        投保成功后，次日零时。
                                    </p>
                                </div>
                            </div>
                        </div>
                    </dd>
                </dl>
                <dl class="qa_box mt30 c">
                    <dt class="c">
                        <img src="./insuranceDetails/h_cjwt1.png" width="80" height="80" alt="">
                        <div class="qa_con por">
                            <div class="qa_con1">
                                <div class="qa_inner">
                                    <p>投、被保人关系可选哪些？</p>
                                </div>
                            </div>
                        </div>
                    </dt>
                    <dd>
                        <img src="./insuranceDetails/h_cjwt2.png" width="80" height="80" alt="">
                        <div class="qa_con por">
                            <div class="qa_con1">
                                <div class="qa_inner">
                                    <p class="por">
                                        目前仅限本人、父母、配偶、子女。子女是成年人也可以投保。投保时不需要提供关系证明，理赔时，理赔人员根据情况，可能要求出示结婚证、出生证明。
                                    </p>
                                </div>
                            </div>
                        </div>
                    </dd>
                </dl>
                <dl class="qa_box mt30 c">
                    <dt class="c">
                        <img src="./insuranceDetails/h_cjwt1.png" width="80" height="80" alt="">
                        <div class="qa_con por">
                            <div class="qa_con1">
                                <div class="qa_inner">
                                    <p>是否可以多次购买?</p>
                                </div>
                            </div>
                        </div>
                    </dt>
                    <dd>
                        <img src="./insuranceDetails/h_cjwt2.png" width="80" height="80" alt="">
                        <div class="qa_con por">
                            <div class="qa_con1">
                                <div class="qa_inner">
                                    <p class="por">
                                        否，同一被保险人在一个保单年度，只能购买一次。
                                    </p>
                                </div>
                            </div>
                        </div>
                    </dd>
                </dl>
                <dl class="qa_box mt30 c">
                    <dt class="c">
                        <img src="./insuranceDetails/h_cjwt1.png" width="80" height="80" alt="">
                        <div class="qa_con por">
                            <div class="qa_con1">
                                <div class="qa_inner">
                                    <p>投保前已经发生的疾病是否可以理赔？</p>
                                </div>
                            </div>
                        </div>
                    </dt>
                    <dd>
                        <img src="./insuranceDetails/h_cjwt2.png" width="80" height="80" alt="">
                        <div class="qa_con por">
                            <div class="qa_con1">
                                <div class="qa_inner">
                                    <p class="por">
                                        本产品不承担投保前疾病。
                                    </p>
                                </div>
                            </div>
                        </div>
                    </dd>
                </dl>
                <dl class="qa_box mt30 c">
                    <dt class="c">
                        <img src="./insuranceDetails/h_cjwt1.png" width="80" height="80" alt="">
                        <div class="qa_con por">
                            <div class="qa_con1">
                                <div class="qa_inner">
                                    <p>质子重离子赔哪些责任？</p>
                                </div>
                            </div>
                        </div>
                    </dt>
                    <dd>
                        <img src="./insuranceDetails/h_cjwt2.png" width="80" height="80" alt="">
                        <div class="qa_con por">
                            <div class="qa_con1">
                                <div class="qa_inner">
                                    <p class="por">
                                        质子重离子放射治疗而发生的相关费用，包括膳食费、护理费、医生费、检查检验费、治疗费、药品费100%赔付；但本项责任下不包括化学疗法、放射疗法、肿瘤免疫疗法、肿瘤内分泌疗法和肿瘤靶向疗法所产生的医疗费用。
                                    </p>
                                </div>
                            </div>
                        </div>
                    </dd>
                </dl>
            </div>
        </div>
    </div>
</template>

<script>
  import baseURL from "../../common/const"

  export default {
    name: "InsuranceDetails",
    components: {},
    data() {
      return {
        detail: {},
        start: new Date(),
        name: '',
        id: null
      }
    },
    methods: {
      buy() {
        this.$http.post('/user/transaction', this.$qs.stringify({
          Insurance_id: this.id
        })).then(res => {
          if (res.status === 200) {
            this.$Message.info(res.data.msg)
          } else {
            this.$Message.error(res.status)
          }
        }).catch(err => {
          this.$Message.error(err)
        })
      }
    },
    created() {
      this.detail = this.$route.query.detail;
      this.name = this.$route.query.name;
      this.id = this.$route.query.id;
    },
    destroyed() {
      let end = new Date()
      let timeDelta = (end.getTime() - this.start.getTime()) / 1000  // in seconds
      timeDelta = Math.floor(timeDelta)
      console.log(timeDelta)

      var url = baseURL + '/user/behaviour'
      var data = {
        view_insurance: this.name,
        residence_time: timeDelta
      }
      const formData = new FormData();
      Object.keys(data).forEach((key) => {
        let value = data[key];
        if (typeof value !== 'string') {
          // formData只能append string 或 Blob
          value = JSON.stringify(value);
        }
        formData.append(key, value);
      });
      navigator.sendBeacon(url, formData);
    },
  }
</script>

<style scoped>
    .bz-table td,
    .bz-table thead th {
        padding: 10px 5px;
        line-height: 1.5;
    }

    #baoxianxiangqing span {
        float: none;
        display: initial;
    }

    .pro-price {
        width: 385px;
    }

    .pro_det_con_tips {
        width: 800px;
    }

    .pr_floating em {
        width: 0;
        height: 0;
        overflow: hidden;
        border-width: 0 10px 10px 10px;
        border-color: transparent;
        border-style: none dashed solid dashed;
        position: absolute;
        left: 38%;
    }

    .pr_floating em {
        z-index: 1;
        border-bottom-color: #ddd;
        top: -10px;
    }

    .pr_floating b {
        z-index: 2;
        border-bottom-color: #fff;
        top: -7px;
    }

    .cpts img {
        height: auto;
    }
</style>